<script>
import httpInstance from "@/utils/http";

export default {
  data() {
    return {
      cur_user: JSON.parse(localStorage.getItem("user")),
      // 消息类型常量
      MESSAGE_TYPES: {
        NORMAL: 0,        // 普通消息
        NOTIFICATION: 1,  // 通知消息
        SYSTEM: 2,        // 系统消息
        CLUB_JOIN: 3,     // 加入社团请求
        FRIEND_REQUEST: 4, // 好友请求
        CLUB_EXIT: 5      // 退出社团请求
      },
      // 好友列表
      chatList: [
        {
          id:0,
          nickname:'系统消息',
          avatar:'https://bpic.51yuansu.com/pic3/cover/00/93/38/58dc7ee984cde_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100'
        }
      ],
      currentChatId: '',
      currentChat: {
        id: 0,
        nickname: '请选择聊天',
        avatar: 'http://localhost:8080/uploads/avatar.jpg'
      },

      MsgDTO: {
        content: '',
        type: 0,
        from: JSON.parse(localStorage.getItem('user')).id,
        to: 0
      },
      // 消息列表
      messages: [
        {text: '选择好友', self: false, avatar: 'http://localhost:8080/uploads/avatar.jpg'}
      ],
      showEmoji: false,
      emojis: [
        '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
        '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
        '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
        '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
        '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
        '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
        '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯',
        '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
        '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈',
        '👿', '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '🤖'
      ],
      // 添加统一的表情映射
      emojiMap: {
        '[笑脸]': '😀',
        '[开心]': '😃',
        '[大笑]': '😄',
        '[咧嘴]': '😁',
        '[眯眼笑]': '😆',
        '[苦笑]': '😅',
        '[笑哭]': '😂',
        '[笑倒]': '🤣',
        '[可爱]': '😊',
        '[天使]': '😇',
        '[微笑]': '🙂',
        '[倒脸]': '🙃',
        '[眨眼]': '😉',
        '[放松]': '😌',
        '[爱心眼]': '😍',
        '[喜欢]': '🥰',
        '[飞吻]': '😘',
        '[亲亲]': '😗',
        '[甜笑]': '😙',
        '[害羞笑]': '😚',
        '[馋]': '😋',
        '[调皮]': '😛',
        '[吐舌笑]': '😝',
        '[眯眼吐舌]': '😜',
        '[疯狂]': '🤪',
        '[挑眉]': '🤨',
        '[思考]': '🧐',
        '[书呆子]': '🤓',
        '[酷]': '😎',
        '[惊喜]': '🤩',
        '[庆祝]': '🥳',
        '[得意]': '😏',
        '[不屑]': '😒',
        '[难过]': '😞',
        '[低落]': '😔',
        '[担心]': '😟',
        '[困惑]': '😕',
        '[不开心]': '🙁',
        '[难受]': '☹️',
        '[痛苦]': '😣',
        '[崩溃]': '😖',
        '[疲惫]': '😫',
        '[叹气]': '😩',
        '[可怜]': '🥺',
        '[哭泣]': '😢',
        '[大哭]': '😭',
        '[生气]': '😤',
        '[愤怒]': '😠',
        '[暴怒]': '😡',
        '[骂人]': '🤬',
        '[爆炸]': '🤯',
        '[脸红]': '😳',
        '[热]': '🥵',
        '[冷]': '🥶',
        '[害怕]': '😱',
        '[惊恐]': '😨',
        '[焦虑]': '😰',
        '[失望]': '😥',
        '[汗]': '😓',
        '[抱抱]': '🤗',
        '[思考]': '🤔',
        '[偷笑]': '🤭',
        '[嘘]': '🤫',
        '[说谎]': '🤥',
        '[无语]': '😶',
        '[面无表情]': '😐',
        '[冷漠]': '😑',
        '[尴尬]': '😬',
        '[白眼]': '🙄',
        '[惊讶]': '😯',
        '[害怕]': '😦',
        '[吓到]': '😧',
        '[震惊]': '😮',
        '[呆]': '😲',
        '[哈欠]': '🥱',
        '[睡觉]': '😴',
        '[流口水]': '🤤',
        '[困]': '😪',
        '[晕]': '😵',
        '[闭嘴]': '🤐',
        '[恶心]': '🥴',
        '[想吐]': '🤢',
        '[吐了]': '🤮',
        '[打喷嚏]': '🤧',
        '[感冒]': '😷',
        '[发烧]': '🤒',
        '[受伤]': '🤕',
        '[发财]': '🤑',
        '[牛仔]': '🤠',
        '[恶魔]': '😈',
        '[生气]': '🤬',
        '[食人魔]': '👹',
        '[怪物]': '👺',
        '[小丑]': '🤡',
        '[便便]': '💩',
        '[幽灵]': '👻',
        '[骷髅]': '💀',
        '[死神]': '☠️',
        '[外星人]': '👽',
        '[机器人]': '🤖'
      }
    };
  },
  methods: {
    //获取系统消息
    getSysMsg(){
      httpInstance({
        url:'api/sys/msg/' + this.cur_user.id,
        method:"get"
      }).then(res => {
        console.log("系统消息:", res)
        if(res.code === 200){
          const historyMessages = res.data
            .filter(msg => msg.type !== 0) // 确保只处理非普通消息
            .map(msg => {
              // 将文本表情转换为emoji
              let displayContent = msg.content;
              for (let text in this.emojiMap) {
                const escapedText = text.replace(/[[\]]/g, '\\$&');
                displayContent = displayContent.replace(
                  new RegExp(escapedText, 'g'), 
                  this.emojiMap[text]
                );
              }

              // 根据消息类型添加特定标签
              let messagePrefix = '';
              if (msg.type === this.MESSAGE_TYPES.CLUB_JOIN) {
                messagePrefix = '<span class="message-tag club-tag">社团申请</span> ';
              } else if (msg.type === this.MESSAGE_TYPES.FRIEND_REQUEST) {
                messagePrefix = '<span class="message-tag friend-tag">好友申请</span> ';
              } else if (msg.type === this.MESSAGE_TYPES.CLUB_EXIT) {
                messagePrefix = '<span class="message-tag exit-tag">退出申请</span> ';
              } else if (msg.type !== 0) {
                // 其他非普通消息类型
                messagePrefix = '<span class="message-tag system-tag">系统消息</span> ';
              }
                  
              return {
                id: msg.id,
                from: msg.from,  // 添加发送者id
                to: msg.to,      // 添加接收者id
                clubId: msg.clubId, // 确保clubId存在
                stat: msg.stat,
                type: msg.type,
                text: messagePrefix + displayContent,
                self: false,
                avatar: 'http://localhost:8080/uploads/avatar.jpg'
              };
            });

          console.log("处理后的系统消息:", historyMessages);
          this.messages = historyMessages;
          this.scrollToBottom();
        }
      }).catch(err => {
        console.log("获取系统消息失败:", err)
      })
    },
    //获取聊天历史
    getHistory(friendId) {
      httpInstance({
        url: '/api/msg/history/' + friendId,
        method: 'get'
      }).then(res => {
        if (res.code === 200) {
          const currentUserId = this.cur_user.id;
          const userAvatar = this.cur_user.avatar;
          const friend = this.chatList.find(c => c.id === friendId);
          const friendAvatar = friend ? friend.avatar : 'http://localhost:8080/uploads/avatar.jpg';

          // 处理历史消息
          const historyMessages = res.data
            .filter(msg => msg.type === 0) // 只保留普通聊天消息，过滤掉系统消息
            .map(msg => {
              // 将文本表情转换为emoji
              let displayContent = msg.content;
              for (let text in this.emojiMap) {
                displayContent = displayContent.replace(
                  new RegExp(text.replace(/[[\]]/g, '\\$&'), 'g'), 
                  this.emojiMap[text]
                );
              }

              return {
                id: msg.id,
                from: msg.from,  // 添加发送者id
                to: msg.to,      // 添加接收者id
                createTime: msg.createTime,
                stat: msg.stat,
                type: msg.type,
                text: displayContent,
                clubId: msg.clubId, 
                self: msg.from === currentUserId,
                avatar: msg.from === currentUserId ? userAvatar : friendAvatar
              };
            });

          console.log("好友聊天历史 (只包含普通消息):", historyMessages);
          this.messages = historyMessages;
          this.scrollToBottom();
        }
      }).catch(err => {
        console.log("获取聊天历史失败:", err);
      });
    },
    // 切换话题的时候，从数据库中查找用户的消息记录
    selectChat(id) {
      this.currentChatId = id;
      this.currentChat = this.chatList.find(c => c.id === this.currentChatId);
      
      // 切换会话时清空聊天记录
      this.messages = []; 
      
      if (id === 0) {
        // 选择系统消息
        console.log("切换到系统消息");
        this.getSysMsg(); // 获取系统消息
      } else if (id) {
        // 选择普通好友聊天
        console.log("切换到好友聊天:", id);
        this.getHistory(id); // 获取聊天历史记录（仅普通消息）
      }
    },
    // 获取好友列表
    getFriendsList() {
      httpInstance({
        url: '/api/user/friends',
        method: "get"
      }).then(res => {
        const filteredChatList = res.data.map(item => {
          const { password, phone, role, status, dept, ...rest } = item;
          return rest;
        });
        // 检查特定对象是否存在，不存在则添加
        const systemMessage = {
          id: 0,
          nickname: '系统消息',
          avatar: 'https://bpic.51yuansu.com/pic3/cover/00/93/38/58dc7ee984cde_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100',
          online: true // 系统消息永远在线
        };
        const existingSystemMessage = filteredChatList.find(item => item.id === systemMessage.id);
        if (!existingSystemMessage) {
          filteredChatList.push(systemMessage);
        }
        this.chatList = filteredChatList;
      }).catch(err => {
        console.log(err);
      });
    },
    // 修改发送消息的方法
    sendMessage() {
      if (this.MsgDTO.content.trim() === '') return;
      
      this.MsgDTO.from = this.cur_user.id;
      this.MsgDTO.to = this.currentChatId;

      // 保存原始的emoji内容用于显示
      const displayContent = this.MsgDTO.content;
      
      // 转换emoji为文本
      let content = this.MsgDTO.content;
      // 创建反向映射
      const reverseEmojiMap = Object.entries(this.emojiMap).reduce((acc, [text, emoji]) => {
        acc[emoji] = text;
        return acc;
      }, {});
      
      // 使用正则表达式的特殊字符转义
      for (let emoji in reverseEmojiMap) {
        const escapedEmoji = emoji.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        content = content.replace(new RegExp(escapedEmoji, 'g'), reverseEmojiMap[emoji]);
      }
      
      this.MsgDTO.content = content;
      
      httpInstance({
        url: '/api/user/send',
        method: "post",
        data: this.MsgDTO
      }).then(res => {
        if (res.code === 200) {
          const newMessage = {
            text: displayContent,
            self: true,
            avatar: this.cur_user.avatar,
            type: this.MsgDTO.type,
            stat: 0,
            createTime: new Date().toISOString()
          };
          this.messages.push(newMessage);
          this.scrollToBottom();
          this.MsgDTO.content = '';
        }
      }).catch(err => {
        console.log(err);
        this.MsgDTO.content = '';
      });
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatMessages = this.$refs.chatMessages;
        if (chatMessages) {
          chatMessages.scrollTop = chatMessages.scrollHeight;
        }
      });
    },
    // 添加插入表情的方法
    insertEmoji(emoji) {
      this.MsgDTO.content += emoji;
      this.showEmoji = false; // 选择后关闭表情面板
    },
    // 刷新当前聊天历史
    refreshCurrentChat() {
      if (this.currentChatId === 0) {
        // 刷新系统消息
        this.getSysMsg();
      } else if (this.currentChatId) {
        // 刷新普通聊天历史
        this.getHistory(this.currentChatId);
      }
    },
    // 格式化时间
    formatTime(time) {
      if (!time) return '';
      
      const date = new Date(time);
      const now = new Date();
      const diff = now - date;
      
      // 今天的消息只显示时间
      if (date.toDateString() === now.toDateString()) {
        return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
      }
      
      // 昨天的消息显示"昨天 HH:mm"
      const yesterday = new Date(now);
      yesterday.setDate(yesterday.getDate() - 1);
      if (date.toDateString() === yesterday.toDateString()) {
        return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
      }
      
      // 一周内的消息显示"周几 HH:mm"
      if (diff < 7 * 24 * 60 * 60 * 1000) {
        const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        return `${weekdays[date.getDay()]} ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
      }
      
      // 其他时间显示完整日期
      return date.toLocaleDateString('zh-CN', { 
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      }).replace(/\//g, '-');
    },
    async handleConfirmMessage(message) {
      try {
        // 先更新消息状态为已确认
        const updateRes = await httpInstance.post('/api/msg/update', {
          id: message.id, 
          stat: 1  // 确认消息
        });

        if (updateRes.code === 200) {
          // 根据消息类型执行不同的操作
          if (message.type === this.MESSAGE_TYPES.FRIEND_REQUEST) {
            // 如果是好友申请消息，调用添加好友接口
            const addFriendRes = await httpInstance.post('/api/user/addfriend/' + message.from);
            if (addFriendRes.code !== 200) {
              this.$message.error('添加好友失败');
            } else {
              this.$message.success('已添加好友');
            }
          } else if (message.type === this.MESSAGE_TYPES.CLUB_JOIN) {
            // 如果是加入社团请求，调用确认加入社团接口
            console.log("确认社团加入请求", message);
            if (!message.clubId) {
              this.$message.error('缺少社团ID，无法处理请求');
              return;
            }
            
            const joinClubRes = await httpInstance.post('/api/club/join', {
              userId: message.from,
              clubId: message.clubId,
            });
            if (joinClubRes.code !== 200) {
              this.$message.error('确认加入社团失败: ' + joinClubRes.message);
            } else {
              this.$message.success('已确认加入社团');
            }
          } else if (message.type === this.MESSAGE_TYPES.CLUB_EXIT) {
            // 如果是退出社团请求，调用移除用户接口
            console.log("确认社团退出请求", message);
            if (!message.clubId || !message.from) {
              this.$message.error('缺少必要信息，无法处理请求');
              return;
            }
            
            const removeUserRes = await httpInstance.post(`/api/club/removeUser/${message.from}/${message.clubId}`);
            if (removeUserRes.code !== 200) {
              this.$message.error('确认退出社团失败: ' + removeUserRes.message);
            } else {
              this.$message.success('已确认成员退出社团');
            }
          } else {
            // 其他类型的消息
            this.$message.success('已确认消息');
          }
          // 刷新消息列表
          this.getSysMsg();
        }
      } catch (err) {
        console.error('确认消息失败:', err);
        this.$message.error('确认消息失败: ' + (err.message || '未知错误'));
      }
    },

    async handleRejectMessage(message) {
      try {
        const updateRes = await httpInstance.post('/api/msg/update', {
          id: message.id,
          stat: 2  // 拒绝消息
        });

        if (updateRes.code === 200) {
          // 根据消息类型执行不同的操作
          if (message.type === this.MESSAGE_TYPES.FRIEND_REQUEST) {
            // 如果是好友申请消息，不需要额外操作，只需更新消息状态
            this.$message.success('已拒绝好友请求');
          } else if (message.type === this.MESSAGE_TYPES.CLUB_JOIN) {
            // 如果是加入社团请求，调用拒绝加入社团接口
            console.log("拒绝社团加入请求", message);
            if (!message.clubId) {
              this.$message.error('缺少社团ID，无法处理请求');
              return;
            }
            
            const rejectJoinRes = await httpInstance.post('/api/club/confirm-join', {
              userId: message.from,
              clubId: message.clubId,
              status: 2 // 2表示拒绝加入
            });
            if (rejectJoinRes.code !== 200) {
              this.$message.error('拒绝加入社团失败: ' + rejectJoinRes.message);
            } else {
              this.$message.success('已拒绝加入社团请求');
            }
          } else if (message.type === this.MESSAGE_TYPES.CLUB_EXIT) {
            // 如果是退出社团请求，拒绝即可，无需调用额外接口
            this.$message.success('已拒绝退出社团请求');
          } else {
            // 其他类型的消息
            this.$message.success('已拒绝消息');
          }
          // 刷新消息列表
          this.getSysMsg();
        }
      } catch (err) {
        console.error('拒绝消息失败:', err);
        this.$message.error('拒绝消息失败: ' + (err.message || '未知错误'));
      }
    }
  },
  mounted() {
    console.log("获取好友列表");
    this.getFriendsList();
  }
};
</script>

<template>
  <div class="message_box">
    <div class="chat-container">
      <!-- 左侧：聊天列表 -->
      <div class="chat-sidebar">
        <el-menu class="chat-list" :default-active="currentChatId" @select="selectChat">
          <el-menu-item v-for="chat in chatList" :key="chat.id" :index="chat.id">
            <div class="chat-item-content">
              <el-avatar :src="chat.avatar" class="avatar"></el-avatar>
              <div class="chat-info">
                <span class="chat-title">{{ chat.nickname }}</span>
                <span v-if="chat.id !== 0" class="online-status">
                  <span class="status-dot" :class="{ 'online': chat.online, 'offline': !chat.online }"></span>
                  {{ chat.online ? '在线' : '离线' }}
                </span>
              </div>
            </div>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧：聊天窗口 -->
      <div class="chat-window">
        <div class="chat-header">
          <el-avatar v-if="currentChat" :src="currentChat.avatar" class="header-avatar"></el-avatar>
          <span class="header-title">{{ this.currentChat.nickname }}</span>
        </div>

        <div class="chat-messages" ref="chatMessages">
          <div v-for="(msg, index) in messages" :key="index" class="message" :class="{ 'my-message': msg.self }">
            <el-avatar :src="msg.avatar" class="message-avatar"></el-avatar>
            <div class="message-bubble">
              <div class="message-text" v-html="msg.text"></div>
              <div v-if="msg.type!== 0">
                <br>
                <el-button v-if="msg.stat === 0" type="primary" @click="handleConfirmMessage(msg)">确定</el-button>
                <el-button v-if="msg.stat === 0" type="danger" @click="handleRejectMessage(msg)">拒绝</el-button>
                <el-button v-if="msg.stat === 1" type="success" disabled>已确认</el-button>
                <el-button v-if="msg.stat === 2" type="danger" disabled>已拒绝</el-button>
              </div>
              <div class="message-time" v-if="msg.createTime">{{ formatTime(msg.createTime) }}</div>
            </div>
          </div>
        </div>

        <!-- 底部输入框 -->
        <div class="chat-input">
          <el-popover
            placement="top-start"
            width="515"
            trigger="click"
            v-model="showEmoji">
            <div class="emoji-container">
              <span
                v-for="(emoji, index) in emojis"
                :key="index"
                class="emoji-item"
                @click="insertEmoji(emoji)">
                {{ emoji }}
              </span>
            </div>
            <el-button slot="reference" icon="el-icon-sunny" circle></el-button>
          </el-popover>
          <el-input
            v-model="MsgDTO.content"
            placeholder="输入消息..."
            @keyup.enter="sendMessage"
            @focus="refreshCurrentChat"
            class="input-box"
          ></el-input>
          <el-button type="primary" icon="el-icon-position" @click="sendMessage">发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.message_box {
  width: 90%;
  height: calc(100vh - 140px);
  margin: 70px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #fff;
  position: relative;
}

/* 主要布局 */
.chat-container {
  display: flex;
  height: 100%;
  min-height: unset;
  max-height: unset;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* 左侧会话列表 */
.chat-sidebar {
  width: 280px;
  background: #f8f9fa;
  border-right: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
}

.chat-list {
  flex: 1;
  border-right: none;
}

.el-menu-item {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 20px;
  margin: 4px 8px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.el-menu-item:hover {
  background: #e6f7ff;
  transform: translateX(4px);
}

.el-menu-item.is-active {
  background: #e6f7ff;
  color: #1890ff;
  font-weight: 500;
}

.avatar {
  width: 45px;
  height: 45px;
  margin-right: 12px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-item-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.chat-info {
  flex: 1;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-title {
  font-size: 15px;
  color: #333;
  line-height: 1.2;
}

.online-status {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  line-height: 1;
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online {
  background-color: #67C23A;
  box-shadow: 0 0 4px rgba(103, 194, 58, 0.4);
}

.status-dot.offline {
  background-color: #909399;
  box-shadow: 0 0 4px rgba(144, 147, 153, 0.4);
}

/* 右侧聊天窗口 */
.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* 顶部 */
.chat-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.header-avatar {
  width: 45px;
  height: 45px;
  margin-right: 15px;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 消息窗口 */
.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f8f9fa;
}

/* 消息气泡 */
.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.my-message {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 40px;
  height: 40px;
  margin: 0 12px;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-bubble {
  max-width: 60%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.message .message-bubble {
  background: #fff;
  color: #333;
  border: 1px solid #eaeaea;
}

.my-message .message-bubble {
  background: #1890ff;
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

.message-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.my-message .message-bubble:hover {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);
}

.message-time {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  text-align: right;
  padding-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.my-message .message-time {
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 底部输入框 */
.chat-input {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #eaeaea;
  background: #fff;
  gap: 12px;
}

.input-box {
  flex: 1;
}

.input-box :deep(.el-input__inner) {
  border-radius: 24px;
  padding: 0 20px;
  height: 42px;
  border: 1px solid #eaeaea;
  transition: all 0.3s ease;
}

.input-box :deep(.el-input__inner):focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.el-button {
  border-radius: 24px;
  padding: 0 24px;
  height: 42px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

/* 表情相关样式 */
.emoji-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.emoji-item {
  cursor: pointer;
  padding: 8px;
  font-size: 24px;
  text-align: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.emoji-item:hover {
  background: #f0f0f0;
  transform: scale(1.2);
}

/* 自定义滚动条 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #f8f9fa;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

/* 消息状态按钮样式 */
.message-bubble .el-button {
  margin-top: 8px;
  padding: 6px 16px;
  height: 32px;
  font-size: 13px;
  border-radius: 16px;
}

.message-bubble .el-button + .el-button {
  margin-left: 8px;
}

.message-bubble .el-button[disabled] {
  opacity: 0.7;
}

.message-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 12px;
  font-weight: bold;
}

.club-tag {
  background-color: #409EFF;
  color: white;
}

.friend-tag {
  background-color: #67C23A;
  color: white;
}

.system-tag {
  background-color: #E6A23C;
  color: white;
}

/* 添加退出社团标签样式 */
.exit-tag {
  background-color: #F56C6C;
  color: white;
}
</style>
